<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/01.css">
    <link rel="stylesheet" href="css/02.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/gouwuche.css">
    <style>
        .show .img{
            transform:rotate(540deg);
        }
    </style>

    <script src="jquery.min.js"></script>



    <!-- <link rel="stylesheet" href="css/common.css"> -->



</head>

<body>
    <header id="head"></header>

    <main>
        <div id="con">
            <div class="b1">
                <div class="left">
                    <p>长轴距
                        <span>GLC SUV</span>
                        <a href="">更改车型</a>
                    </p>

                </div>
                <div class="right">
                    <span>1.配置车辆</span>
                    <span>2.选择经销商</span>
                    <span>3.支付订单</span>
                </div>
            </div>
            <div class="b2">
                <div class="left">
                    <span>西安市</span>
                    <span>当前的位置</span>
                    <span>更改城市</span>
                </div>
                <div class="right">
                    <img src="img/gwc01_03.gif" alt="">
                </div>
            </div>

        </div>
        <div id="b3">
            <div class="con">
                <div class="left">
                    <p class="p1">选择您的爱车</p>
                    <p class="p2">请通过配置选择有库存的车辆.支付意向金后,所选车辆将为您优先预留48小时</p>
                    <div class="box1" id="titlenone">
                        <span class="span1">长轴距GLX SUV 2020年款1</span>
                        <span class="span2">
                            <img src="img/gwc04_03.gif" alt="" class="img">
                        </span>
                    </div>
                    <div class="box1none">
                        <li>长轴距GLC SUV 2020年款1</li>
                        <li>长轴距GLC SUV 2020年款1</li>
                        <li>长轴距GLC SUV 2020年款1</li>
                    </div>
                    <div class="box2">
                        <p><span class="left">车型规格 <a href="">(有3个选项)</a></span><span class="right">——</span></p>
                        <div class="box"><input type="checkbox"> <span>GLC 26L 4MATLX 动感型 2020款1</span></div>
                        <div class="box"><input type="checkbox"> <span>GLC 26L 4MATLX 动感型 2020款1</span></div>
                        <div class="box"><input type="checkbox"> <span>GLC 26L 4MATLX 动感型 2020款1</span></div>
                    </div>
                    <div class="box3">
                            <p><span class="left">外观颜色 <a href="">(有2个选项)</a></span><span class="right">—</span></p>
                            <div class="box"><span><img src="img/gwc07.jpg" alt=""></span> <span>北极白色</span></div>
                            <div class="box"><span><img src="img/gwc08.jpg" alt=""></span> <span>债言黑色</span></div>
                           
                           
                     </div>
                     <div class="box4">
                            <p><span class="left">内饰颜色 <a href="">(有2个选项)</a></span><span class="right">+</span></p>
                            <div class="box"><span><img src="img/gwc08.jpg" alt=""></span> <span>黑色</span></div>
                            <div class="box"><span><img src="img/gwc08.jpg" alt=""></span> <span>黑色</span></div>
                           
                           
                     </div>
                     <div class="box5">
                            <p><span class="left">轮廓样式 <a href="">(有2个选项)</a></span><span class="right">+</span></p>
                       
                     </div>
                     <div class="box6">
                            <p><span class="left">选装配备<a href="">(有1个选项)</a></span><span class="right">+</span></p>
                           
                           
                           
                     </div>
                </div>
                <div class="right">
                    <div class="box1">
                        <div class="head">
                                <p class="grid-car-card__name">GLC 260 L 4MATIC 动感型 2020款1</p>
                                <p class="grid-car-card__price">¥ 397,800 起* <span class="grid-car-card__monthly-installment">月供 ¥ 432 起</span></p>

                        </div>
                        <div class="content">
                                
                        </div>
                        <div class="foot"></div>
                    </div>
                </div>
            </div>

        </div>

    </main>
    <div id="bottom">
        <div class="con">
            <div class="left">
                    <div class="box1">
                        <img src="img/gwc111.png" alt="">
                    </div>
                    <div class="box2">
                        <p>厂商建议零售价*</p>
                        <p>¥ 232,800 起</p>
                    </div>
                    <div class="box3">
                            <p>月供</p>
                            <p>¥ 447 起</p>
                    </div>
                    <div class="box4">
                        <img src="img/gwc112.png" alt="">
                    </div>
            </div>
            <div class="right">
                <div class="box1">
                        <p>意向金*</p>
                        <p>¥ 999</p>
                </div>
                <div class="box2">下一步</div>
            </div>
        </div>
    </div>
    <div id="foot"></div>
     

        
    </script>
</body>

</html>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/01.js"></script> -->
<script>
    $('#head').load('head.html');
    $('#foot').load('foot.html');

    $("#head .p1").html(sessionStorage.getItem("userinfor"))


  
</script>
    <script>

            $("#titlenone").click(function () {
                alert(1)
                $(".box1none").slideToggle();
                $(this).toggleClass("show")
            })
        </script>